<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:form id="formBusqueda">
        <p:panel id="pnlBusquedaArticulos" header="Consulta Articulos" style="width:650px;margin: 0px auto;" 
                 toggleable="true" widgetVar="buscar" collapsed="#{BKArticulo.listaArticulosActivos ne null}" >
            <p:panelGrid>
                <p:row >
                    <p:column>
                        <h:outputText id="lblBanco" value="CATEGORIA: "  class="lblBusqueda"  />
                    </p:column>
                    <p:column>
                        <p:selectOneMenu id="cbxCategoria" value="#{BKArticulo.idCategoriaArticulo}" style="width: 160px">  
                            <f:selectItem itemLabel="Seleccione" itemValue="0" />  
                            <f:selectItems value="#{BKArticulo.listaCategoriaArticulo}" var="listaCategorias" itemLabel="#{listaCategorias.nombre}" itemValue="#{listaCategorias.id}"/>  
                            <p:ajax update="cbxSubCategoria" listener="#{MBArticulo.buscarSubCategorias}" event="change" />
                        </p:selectOneMenu>  
                    </p:column>
                    <p:column>
                        <h:outputText value="SUB CATEGORIA: " class="lblBusqueda" />
                    </p:column>
                    <p:column>
                        <p:selectOneMenu id="cbxSubCategoria" value="#{BKArticulo.idSubCategoriaArticulo}" style="width: 160px"
                                         disabled="#{BKArticulo.listaSubCategoriaArticulo eq null}">  
                            <f:selectItem itemLabel="Seleccione" itemValue="0" />  
                            <f:selectItems value="#{BKArticulo.listaSubCategoriaArticulo}" var="listaCategorias" itemLabel="#{listaCategorias.nombre}" itemValue="#{listaCategorias.id}"/>  
                            <p:ajax listener="#{MBArticulo.seleccionarSubCategorias}" event="change" update="cbxModelo" /> 
                        </p:selectOneMenu> 
                    </p:column>
                </p:row>
                <p:row >
                    <p:column>
                        <h:outputText  class="lblBusqueda" value="MODELO: "   />
                    </p:column>
                    <p:column colspan="3">
                        <p:selectOneMenu id="cbxModelo" value="#{BKArticulo.articuloBusqueda.modelo}" style="width: 100%" 
                                         filter="#{BKArticulo.listaModelosDistintos.size() gt 10}" filterMatchMode="contains">  
                            <f:selectItem itemLabel="Seleccione" itemValue="" />  
                            <f:selectItems value="#{BKArticulo.listaModelosDistintos}" var="modelo" itemLabel="#{modelo}" itemValue="#{modelo}"/>  
                        </p:selectOneMenu>
                    </p:column>
                </p:row>
                <p:row >
                    <p:column>
                        <h:outputText id="lblNombreCategoriaBuscar" value="DETALLE: " class="lblBusqueda" />
                    </p:column>
                    <p:column colspan="3">
                        <p:inputText onkeyup="cambiarMayuscula(this)" value="#{BKArticulo.articuloBusqueda.detalle}" style="width: 100%" maxlength="100"/>
                    </p:column>
                </p:row>
                <p:row >
                    <p:column>
                        <h:outputText id="lblCuentaBancaria" value="NOMBRE COMERCIAL: " class="lblBusqueda" />
                    </p:column>
                    <p:column colspan="3">
                        <p:inputText onkeyup="cambiarMayuscula(this)" value="#{BKArticulo.articuloBusqueda.nombreComercial}" style="width: 100%" maxlength="400"/>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <p:commandButton id="btnBuscarCategoria" actionListener="#{MBArticulo.buscarListaArticulos}" value="BUSCAR"  
                                         update="pnlBusquedaArticulos,dataTablaArticulo" oncomplete="listaArticulos.show();buscar.toggle()" 
                                         styleClass="ui-priority-primary" style="font-size: 12px"/>
                    </p:column>
                </p:row>
            </p:panelGrid>

        </p:panel>
        <br/>
        <p:panel header="Lista de Articulos" closable="true" visible="#{(BKArticulo.listaArticulosActivos eq null)?false:true}" widgetVar="listaArticulos">
            <p:dataTable id="dataTablaArticulo" var="articulo" value="#{BKArticulo.listaArticulosActivos}" 
                         widgetVar="carsTable" emptyMessage="No se encontraron articulo" styleClass="datable-busqueda"
                         filteredValue="" paginator="true" rows="20" scrollable="true" scrollHeight="250" style="width:100%"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                         {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  paginatorPosition="bottom" 
                         rowsPerPageTemplate="20,40,60"  rowIndexVar="index"> 
                <f:facet name="header" >
                    <p:outputPanel layout="block" >
                        <h:commandButton value="Exportar EXCEL">  
                            <p:dataExporter type="xls" target="dataTablaArticulo" fileName="articulos" />  
                        </h:commandButton>  

                        <h:commandButton value="Exportar PDF">  
                            <p:dataExporter type="pdf" target="dataTablaArticulo" fileName="articulos"/>  
                        </h:commandButton>
                    </p:outputPanel>

                </f:facet>
                <p:column id="idColumnaNum" sortBy="#{articulo.id}"  style="width:5%" > 
                    <f:facet name="header">  
                        <h:outputText value="Nº" />  
                    </f:facet> 
                    <h:outputText value="#{index+1}" /> 
                </p:column>

                <p:column id="idColumnaCategoria" sortBy="#{articulo.idCategoriaArticulo.idCategoriaArticulo.nombre}" style="width:10%"> 
                    <f:facet name="header">  
                        <h:outputText value="Categoria" />  
                    </f:facet> 
                    <h:outputText value="#{articulo.idCategoriaArticulo.idCategoriaArticulo.nombre}" /> 
                </p:column>

                <p:column id="idColumnaSubCategoria" sortBy="#{articulo.idCategoriaArticulo.nombre}" style="width : 20%" > 
                    <f:facet name="header">  
                        <h:outputText value="Sub Categoria" />  
                    </f:facet> 
                    <h:outputText value="#{articulo.idCategoriaArticulo.nombre}" /> 
                </p:column>

                <p:column id="idColumnaNombreComercial" sortBy="#{articulo.nombreComercial}" style="width:50%" > 
                    <f:facet name="header">  
                        <h:outputText value="Nombre" />  
                    </f:facet> 
                    <h:outputText value="#{articulo.nombreComercial}" /> 
                </p:column>       
                <p:column id="idAccionesArticulos" headerText="Acciones" exportable="false" style="width:15%" >
                    <h:commandLink action="#{MBArticulo.ver()}" target="_blank">
                        <p:commandButton icon="ui-icon-search" title="Ver"  />
                        <f:setPropertyActionListener value="#{articulo}" target="#{BKArticulo.articuloFormulario}" />  
                    </h:commandLink>
                    <p:commandButton icon="ui-icon-pencil" title="Editar" action="#{MBArticulo.editar()}" immediate="true" ajax="false">
                        <f:setPropertyActionListener value="#{articulo}" target="#{BKArticulo.articuloFormulario}" />  
                    </p:commandButton>  
                    <p:commandButton id="btnEliminarArticulos" title="Eliminar" icon="ui-icon-trash"  oncomplete="confirmacion.show()">
                        <f:setPropertyActionListener value="#{articulo}" target="#{BKArticulo.articuloSeleccionado}" />
                    </p:commandButton>
                </p:column>

            </p:dataTable>	


        </p:panel>

        <p:confirmDialog id="dlgEliminarArticulos" message="¿Realmente desea eliminar el artículo ?" 
                         header="Eliminar Artículo" severity="alert" widgetVar="confirmacion">
            <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">
                <p:commandButton id="btnConfEliArticulos" update="dataTablaArticulo" value="Si"  oncomplete="confirmacion.hide()"  
                                 actionListener="#{MBArticulo.eliminar}" />  
                <p:commandButton id="btnCancEliArticulos" value="No" onclick="confirmacion.hide()" type="button" /> 
            </h:panelGrid>

        </p:confirmDialog>		 
    </h:form>

</html>